<!--
 * @Author: nns4
 * @Date: 2019-12-03 11:17:49
 * @LastEditors: nns4
 * @LastEditTime: 2021-02-24 11:21:19
 * @FilePath: /vue/src/views/shopCar/index.vue
 * @Description: 购物车
 -->


<template>
  <div>购物车

    <router-Link to="/">返回首页刷新</router-Link>

    <div id="main"></div>

  </div>

</template>
<script>
  import * as echarts from 'echarts/core';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import {
    PieChart
  } from 'echarts/charts';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  echarts.use(
    [TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer]
  );
  export default {
    name: "shopCar",
    data() {
      return {};
    },
    mounted() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      console.log(echarts)
      option = {
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{c}%}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 12,
              color: '#999'
            }
          }
        },

        title: {
          text: '积分派发',
          left: 'center'
        },
        tooltip: {
          formatter(params) {
            return `${params.name}:${params.data}%`
          }
        },
        series: [{
          name: '',
          type: 'pie',
          radius: '60%',
          data: [{
            "budgetSubjectId": 33,
            "budgetSubjectName": "海信冰箱产品",
            "ratio": 33,
            "totalScore": 124639465,

            "name": "海信冰箱产品",
            "value": 33
          }, {
            "budgetSubjectId": 34,
            "budgetSubjectName": "海信空调产品",
            "ratio": 21,
            "totalScore": 29249733,

            "name": "海信空调产品",
            "value": 21
          }, {
            "budgetSubjectId": 35,
            "budgetSubjectName": "海信电视产品",
            "ratio": 40,
            "totalScore": 92309883,

            "name": "海信电视产品",
            "value": 40  
          }, {
            "budgetSubjectId": 31,
            "budgetSubjectName": "信我家",
            "ratio": 3,
            "totalScore": 414,

            "name": "信我家",
            "value": 3
          }, {
            "budgetSubjectId": 31,
            "budgetSubjectName": "巨好看",
            "ratio": 2,
            "totalScore": 414,
            "datas": [2],
            "name": "巨好看",
            "value": 2
          }],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      option && myChart.setOption(option);

      setInterval(() => {
        option.series[0].data[0].value--
        option.series[0].data[1].value++
          option && myChart.setOption(option);
          console.log(90)
      },1000)
    }
  };
</script>
<style lang="less" scoped>
  #main {
    width: 100%;
    height: 800px;
  }
</style>